<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <!--    <meta name="viewport" content="user-scalable=no">-->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>登录</title>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <style>
        html,
        body {
            height: 100%;
        }

        body {
            display: -ms-flexbox;
            display: -webkit-box;
            display: flex;
            -ms-flex-align: center;
            -ms-flex-pack: center;
            -webkit-box-align: center;
            align-items: center;
            -webkit-box-pack: center;
            justify-content: center;
            padding-top: 40px;
            padding-bottom: 40px;
            /*background-color: #f5f5f5;*/
        }

        .form-signin {
            display: block;
            width: 100%;
            max-width: 330px;
            padding: 15px;
            margin: 0 auto 1vh auto;
            border-radius: 28px;
            background-color: #ced4da96;
        }

        .form-signin .checkbox {
            font-weight: 400;
            height: 25px;
        }

        .form-signin .form-control {
            position: relative;
            box-sizing: border-box;
            height: auto;
            padding: 10px;
            font-size: 16px;
        }

        .form-signin .form-control:focus {
            z-index: 2;
        }

        .form-signin input[type="email"] {
            margin-bottom: -1px;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
        }

        .form-signin input[type="password"] {
            margin-bottom: 10px;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }

        .bg-picture {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0px;
            left: 0px;
            z-index: -1;
        }

        .form-control {
            background-color: #f8f9fa82;
        }

        button {
            margin-top: 1vh;
        }

    </style>
</head>
<body style="flex-direction: column;justify-content: start">
<div style="display: flex;
flex-direction: column;
    -ms-flex-align: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: start;">
    <button th:href="@{/mobile/toMobile}" type="submit">点击我</button>
    <a href="/mobile/toMobile">前往移动端主页</a>
    <a href="/AI/index">前往ai测试页面</a>
    <form class="form-signin" th:action="@{/addUser}" method="post">
        <h1 class="h3 mb-3 font-weight-normal">用户添加模块</h1>
        <input class="form-control" type="text" name="name" placeholder="请输入姓名" required onfocus="">
        <input class="form-control" type="text" name="num" placeholder="请输入账号" required>
        <input class="form-control" type="password" name="password" placeholder="请输入密码" required>请选择身份类型
        <select name="valid" required>
            <option value="">---请选择---</option>
            <option value="2">员工</option>
            <option value="3" selected>顾客</option>
            <option value="1">管理员</option>
        </select>
        <button class="btn btn-lg btn-primary btn-block" type="submit">添加</button>
    </form>
    <form class="form-signin" th:action="@{/findByName}" method="get">
        <h1 class="h3 mb-3 font-weight-normal">按姓名查询</h1>
        <input class="form-control" type="text" name="name" placeholder="请输入姓名" required>
        <button class="btn btn-lg btn-primary btn-block" type="submit">按姓名查找</button>
    </form>
    <form class="form-signin" th:action="@{/findById}" method="get">
        <h1 class="h3 mb-3 font-weight-normal">按id查询</h1>
        <input class="form-control" type="text" name="id" placeholder="请输入id" required>
        <button class="btn btn-lg btn-primary btn-block" type="submit">按id查找</button>
    </form>
    <form class="form-signin" th:action="@{/findByValid}" method="get">
        <h1 class="h3 mb-3 font-weight-normal">按权限查询</h1>
        <select name="valid" required>
            <option value="">---请选择---</option>
            <option value="2">员工</option>
            <option value="3" selected>顾客</option>
            <option value="1">管理员</option>
        </select>
        <button class="btn btn-lg btn-primary btn-block" type="submit">按权限查找</button>
    </form>
    <hr>
    <a th:href="@{/findAll}">查找所有用户</a>
    <table th:if="${userList}">
        <caption>用户信息表</caption>
        <tr>
            <th>id</th>
            <th>姓名</th>
            <th>学号(工号)</th>
            <th>密码</th>
            <th>权限</th>
        </tr>
        <tr th:each="user:${userList}">
            <th th:text="${user.getId()}"></th>
            <th th:text="${user.getName()}"></th>
            <th th:text="${user.getNum()}"></th>
            <th th:text="${user.getPassword()}"></th>
            <th th:text="${user.getValid()}"></th>
        </tr>
    </table>
    <table th:if="${user}">
        <caption>用户信息表</caption>
        <tr>
            <th>id</th>
            <th>姓名</th>
            <th>学号(工号)</th>
            <th>密码</th>
            <th>权限</th>
        </tr>
        <tr>
            <th th:text="${user.getId()}"></th>
            <th th:text="${user.getName()}"></th>
            <th th:text="${user.getNum()}"></th>
            <th th:text="${user.getPassword()}"></th>
            <th th:text="${user.getValid()}"></th>
        </tr>
    </table>
</div>


<div class="container">
    <label class="item">HelloWorld</label>
    <label class="item">HelloWorld</label>
    <label class="item">HelloWorld</label>
    <label class="item">HelloWorld</label>
    <label class="item">HelloWorld</label>
    <label class="item">HelloWorld</label>
    <label class="item">HelloWorld</label>
    <label class="item">HelloWorld</label>
    <label class="item">HelloWorld</label>
    <label class="item">HelloWorld</label>
    <label class="item">HelloWorld</label>
    <label class="item">HelloWorld</label>
    <label class="item">HelloWorld</label>
    <label class="item">HelloWorld</label>
    <label class="item">HelloWorld</label>
    <label class="item">HelloWorld</label>
    <label class="item">HelloWorld</label>
    <label class="item">HelloWorld</label>
    <label class="item">HelloWorld</label>
    <label class="item">HelloWorld</label>
    <label class="item">HelloWorld</label>
    <label class="item">HelloWorld</label>
    <label class="item">HelloWorld</label>
    <label class="item">HelloWorld</label>
    <label class="item">HelloWorld</label>
    <label class="item">HelloWorld</label>
    <label class="item">HelloWorld</label>
    <label class="item">HelloWorld</label>
    <label class="item">HelloWorld</label>
    <label class="item">HelloWorld</label>
    <label class="item">HelloWorld</label>
    <label class="item">HelloWorld</label>
    <label class="item">HelloWorld</label>
    <label class="item">HelloWorld</label>
    <label class="item">HelloWorld</label>
    <label class="item">HelloWorld</label>
    <label class="item">HelloWorld</label>
    <label class="item">HelloWorld</label>
    <label class="item">HelloWorld</label>
    <label class="item">HelloWorld</label>
    <label class="item">HelloWorld</label>
    <label class="item">HelloWorld</label>
    <label class="item">HelloWorld</label>
    <label class="item">HelloWorld</label>
    <label class="item">HelloWorld</label>
    <label class="item">HelloWorld</label>
    <label class="item">HelloWorld</label>
    <label class="item">HelloWorld</label>
    <label class="item">HelloWorld</label>
    <label class="item">HelloWorld</label>
    <label class="item">HelloWorld</label>
    <label class="item">HelloWorld</label>
</div>
</body>
</html>